<template>
	<Form ref="form" :model="info" :label-width="100" :rules="rules">
		<FormItem label="发起人" v-if="!formData.taskId">
			<Input v-model="obj.startUser" placeholder="请输入启动流程的用户" />
		</FormItem>
		<FormItem v-for="(item, index) in formData.formFields" :key="index" :label="item.label" :prop="item.id">
			<template v-if="item.typeName=='string'">
				<Input v-model="info[item.id]" :type="item['properties']['type'] || 'text'" :readonly="item['properties']['readonly']=='true'" :disabled="item['properties']['disabled']=='true'" :placeholder="item['properties']['placeholder']" :rows="item['properties']['rows']" />
			</template>
			<template v-if="item.typeName=='long'">
				<Input v-model.number="info[item.id]" :type="item['properties']['type'] || 'number'" :readonly="item['properties']['readonly']=='true'" :disabled="item['properties']['disabled']=='true'" :placeholder="item['properties']['placeholder']" />
			</template>
			<template v-if="item.typeName=='boolean'">
				<Checkbox v-model="info[item.id]" :disabled="item['properties']['disabled']=='true'" :placeholder="item['properties']['placeholder']">{{item.label}}</Checkbox>
			</template>
			<template v-if="item.typeName=='enum'">
				<Select v-model="info[item.id]" :disabled="item['properties']['disabled']=='true'" :placeholder="item['properties']['placeholder']" style="width:100%">
					<Option v-for="(it, index) in (item.type.values || [])" :value="index" :key="index">{{ it }}</Option>
				</Select>
			</template>
			<template v-if="item.typeName=='date'">
				<DatePicker style="width:100%;" :value="info[item.id]" :type="item['properties']['type'] || 'date'" :readonly="item['properties']['readonly']=='true'" :disabled="item['properties']['disabled']=='true'" :placeholder="item['properties']['placeholder']" :format="item['properties']['format'] || 'yyyy-MM-dd'" @on-change="info[item.id]=$event"></DatePicker>
			</template>
		</FormItem>
		<FormItem label="下一节点分配人ID(唯一)">
			<Input v-model="obj.assignee" placeholder="请输入下一节点分配人(assignee)" />
		</FormItem>
		<FormItem label="下一节点候选人ID(以逗号分隔)">
			<Input v-model="obj.candidateUsers" placeholder="请输入下一节点候选人(candidateUsers)" />
		</FormItem>
		<FormItem label="下一节点候选组ID(以逗号分隔)">
			<Input v-model="obj.candidateGroups" placeholder="请输入下一节点候选组(candidateGroups)" />
		</FormItem>
		<FormItem style="text-align: right;">
			<Button type="primary" @click="startProcess" v-if="formData.processKey">发起流程</Button>
			<Button type="primary" @click="handleProcess" v-if="formData.taskId">处理流程</Button>
		</FormItem>
	</Form>
</template>

<script>
export default {
	comments: {},
	props: {
		formData: {
			type: Object,
			default: function() {
				return {
					formFields: []
				}
			}
		}
	},
	data() {
		return {
			info: {
				userId: '', // 启动流程的用户ID
			}, // 表单数据
			obj: {
				assignee: '',
				candidateUsers: '',
				CandidateGroups: ''
			}, // 候选操作
			rules: {
				userId: [{required: true, message: '必须'}]
			}, // 表单验证规则
		};
	},
	computed: {},
	watch: {
		'formData.processId': function() {
			let formFields = this.formData.formFields || [];
			formFields.forEach(f => {
				// 此处必须使用Vue.set初始化数据，否则验证无效
				this.$set(this.info, f.id, f.value.value || f.defaultValue || '');
				let constraintsArray = [];
				let constraints = f.validationConstraints || [];
				if (constraints.length > 0) {
					constraints.forEach(c => {
						constraintsArray.push(JSON.parse(c.configuration || '{}'));
					});
				}
				this.rules[f.id] = constraintsArray;
			});
		}
	},
	created: function() {},
	mounted: function() {},
	methods: {
		startProcess: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.obj['variables'] = this.info;
					this.$emit("startProcess", {form: this.formData, obj: this.obj});
				}
			});
		},
		handleProcess: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.obj['variables'] = this.info;
					this.$emit("handleProcess", {form: this.formData, obj: this.obj});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
</style>
